<template>
    <div class="login">
          <div class="login-wrap">
              <div class="login-left">
              </div>
              <div class="login-right">
                  <h2>校园uniapp管理系统</h2>
                  <h5>用户登录</h5>
                <el-form :model="formLabelAlign" :rules="rules" ref="ruleForm">
                  <el-form-item  prop="name">
                    <el-input  v-model="formLabelAlign.name" placeholder="请输入用户名">
                      <i slot="prefix" class="el-input__icon el-icon-user"></i>

                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input type="password" v-model="formLabelAlign.password" placeholder="请输入密码">
                      <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="code" >
                      <div class="code-wrap-item">
                        <el-input v-model="formLabelAlign.code" placeholder="图形验证码">
                          <i slot="prefix" class="el-input__icon el-icon-connection"></i>
                        </el-input>
                        <VerifyCode class="VerifyCode" @click.native="updateVerify" ref="verifyCode"></VerifyCode>
                      </div>
                   </el-form-item>
                  <el-button style="width: 100%" type="primary" size="medium" @click="submitClick">登录</el-button>
                </el-form>
              </div>
          </div>
    </div>
</template>

<script>
import {getLogin} from '@/request';
import VerifyCode from "@/components/verifyCode";
    export  default {
      name:"login",
      components:{VerifyCode},
      data(){
        var checkcode=(rule, value, callback)=>{
          if (!value) {
            return callback(new Error('验证码不能为空'));
          }
          if (value!=this.$refs.verifyCode.identifyCode) {
            return callback(new Error('验证码错误'));
          }
          callback();
        }
        var validatename=(rule, value, callback)=>{
          if (!value) {
            return callback(new Error('用户名不能为空'));
          }
          callback();
        }

        var validatePass=(rule, value, callback)=>{
          if (!value) {
            return callback(new Error('密码不能为空'));
          }
          callback();
        }
        return {
          formLabelAlign:{
            name:'',
            password:'',
            code:''
          },
          rules: {
            name: [
              { validator: validatename, trigger: 'blur' }
            ],
            password: [
              { validator: validatePass, trigger: 'blur' }
            ],
            code: [
              { validator: checkcode, trigger: 'blur' }
            ]
          }
        }
      },
      methods:{
        updateVerify(){
          this.$refs.verifyCode.refreshCode();
        },
         submitClick(){
          let that=this;
          this.$refs['ruleForm'].validate(async (valid)=>{
            if(!valid){
              return false;
            }
            let result=await getLogin(this.formLabelAlign);
            if(result.code!=200)return this.$message.error(result.message);
            that.$store.dispatch('savetoken',result.data)
            that.$message.success("登录成功！");
            that.$router.push("/index")
          })
        },
      }
    }
</script>


<style lang="scss">
#app{
  height: 100%;
  width: 100%;
}
      .login{
        overflow: hidden;
        width: 100%;
        min-height: 100%;
        background: url("../assets/image/loginbg.jpg") 100% no-repeat;
        .el-input__inner{
          background-color: #f7fafc;
          height: 40px;
          line-height: 40px;
        }
        .login-wrap{
            margin:6% auto;
            width: 50%;
            min-width: 400px;
            height: 500px;
            display: flex;
            background-color: #ebf4ff;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
          .login-left{
            flex: 0 0 50%;
            background-image: url("../assets/image/dlbox.svg");
            background-repeat: no-repeat;
            background-size: 70% 100%;
            background-position: center;
          }
          .login-right{
            flex: 1;
            padding: 50px;
            background: #fff;
            text-align: center;
          }
        }
      }

      .code-wrap-item{
          display: flex;
          .VerifyCode{
            margin-left: 10px;
          }
      }

      @media screen and (max-width: 1000px){
        .login-left{
          flex: 0 0 0% !important;
          background: #2c3e50;
        }
      }
</style>
